<template>
  <view class="wrap-stars">
    <view class="scene">
      <view
        class="star-item"
        v-for="(item, index) in starList"
        :key="index"
        :style="item.style"
      >
      </view>
    </view>
  </view>
</template>
<script>
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data() {
    return {
      number: 50,
      starList: [],
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {
    this.init();
  },
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    init() {
      this.starList = [];

      let arr = [];
      for (let i = 0; i < this.number; i++) {
        let x = `${(Math.random() * 200).toFixed(2)}vmax`,
          y = `${(Math.random() * 1000).toFixed(2)}vh`,
          z = `${(Math.random() * 200 - 100).toFixed(2)}vmin`,
          rx = `${(Math.random() * 360).toFixed(2)}deg`,
          delay = `${(Math.random() * 900).toFixed(2)}ms`;
        arr.push({
          style: `--x:${x};--y:${y};--z:${z};--rx:${rx}; animation-delay:${delay};`,
          name: 'hyper',
        });
      }
      this.starList = arr;
    },
  },
};
</script>
<style lang="scss" scoped>
.wrap-stars {
  view {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: none;
  }
  position: relative;
  overflow: hidden;
}
.scene {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  perspective: 10vmin;
}
.star-item {
  // --x: 0;
  // --y: 0;
  // --z: 0;
  // --rx: 0deg;
  --delay: 900ms;
  --unit: 3vmin;
  width: var(--unit);
  height: var(--unit);
  --rotate: rotateY(90deg);
  transform: translateZ(-100vmin) var(--rotate) rotateX(var(--rx))
    translateZ(var(--x)) scaleX(1);
  position: absolute;
  top: 0%;
  left: 0%;
  animation: hyper-s 0.9s ease-in 0s infinite normal none;
  background: #fff;
  border-radius: var(--unit);
  border: 1rpx solid rgba(46, 211, 205, 1);
}

@keyframes hyper-s {
  0% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateZ(0vmin) var(--rotate) rotateX(var(--rx))
      translateZ(var(--x)) scaleX(6);
  }
}
</style>
